<template>
  <div>
    <div ref="chartColumn" style="width:1200px; height:370px;"></div>
    <!--    <button @click="changeOption">点击改变内容</button>-->
  </div>

</template>

<script>
import { getyxkhfx } from "@/api/industry/shulian";
import * as echarts from 'echarts';
import {zfUser} from "../../api/industry/shulian";
export default {
  data() {
    return {
      newData:[],
      types:'全',
      chartColumn: null,
      option:{
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '10%',
          left: '10%',
          right: '10%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          show: true,
          axisLabel: {
            formatter: '{value} 位',
            show: false
          },
          splitLine: { show: false },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          inverse: true, // 倒叙
          axisLabel: {
            color: '#6D7A8E',
            fontSize: 20,
            formatter: (val) => {
              return `${val}`;
            }
          },
          axisLine: {
            show: false // 轴线
          },
          axisTick: {
            show: false // 刻度线
          },
          data: ['区域营商环境','科技产业服务港','产业物理空间']
        },
        series: [
          {
            name: 'Echarts',
            type: 'bar',
            barWidth: 20,
            showBackground: true,
            barMaxWidth: 20,
            barMinWidth: 5,
            itemStyle: {
              borderRadius: [0, 10, 10, 0],
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: 'rgba(183, 75, 238)' },
                { offset: 1, color: 'rgba(50, 229, 255, 1)' }
              ]),
              borderWidth: 1,
              borderColor: "black"
            },
            data: [],
            label: {
              show: true,
              position: 'right', // 右侧顶部位置
              formatter: '{c}' // 数据显示格式
            }
          }
        ]
      }
    }
  },
  methods: {
    //统计产业物理空间信息
    updateChartWithData() {
      getyxkhfx().then(res => {
        // console.log(res,'25ssssssssssss3.1')
        const newData = [
          { value: `${res.data.business}`, name: '区域营商环境' },
          { value: `${res.data.service}`, name: '科技产业服务港' },
          { value: `${res.data.industry}`, name: '产业物理空间' }
        ];
        // console.log(res,"统计产业物理空间信息")
        this.option.series[0].data = newData;
        this.chartColumn.setOption(this.option);
      });
    },
    initChart() {
      this.chartColumn = echarts.init(this.$refs.chartColumn);
      // Uncomment the following line if you want to show a loading animation during the API request
      // this.chartColumn.showLoading();

      // Fetch API data and update the chart
      this.updateChartWithData();
    }
  },
    initChart() {
      this.chartColumn = echarts.init(this.$refs.chartColumn);
      // Uncomment the following line if you want to show a loading animation during the API request
      // this.chartColumn.showLoading();

      // Fetch API data and update the chart
      this.updateChartWithData();
    },

  mounted() {
    this.initChart();
    this.updateChartWithData()
  }
}
</script>

<style scoped>

</style>
